<template>
    <div class="new-card">
        <div class="new-card-colors" v-show="id == 0">
            <p class="colors" 
                v-for="(e,index) in cardColor" :key="index" 
                :style="{'background-color':e}" 
                :class="{ colorSelect:index==selected }"
                @click="changeColor(index)"
                >
            </p>
        </div>
        <!-- 照片 -->
        <div class="add-photo" v-if="id == 1">
            <input type="file" id="file" multiple="multiple" @change="showPhoto">
            <div class="add-bt" v-if="url == ''">
                <span class="iconfont icon-tianjia"></span>
            </div>
            <div class="change-bt" v-if="url != ''">
                <span class="iconfont icon-xiugai"></span>
            </div>
            <div class="photo-div">
                <img :src="url" alt="">
            </div>
        </div>
        <!-- 卡片 -->
        <div class="new-card-content" :style="{'background-color':id == 0 ? color[selected]:color[4]}">
            <textarea name="" id="message" placeholder="留言" maxlength="96" v-model="message"></textarea>
            <input type="text" placeholder="签名" id="name" v-model="name">
        </div>
        <div class="labels">
            <p class="title">选择标签</p>
            <div class="label">
                <p class="label-li" 
                    v-for="(e,index) in filteredLabels" :key="index" 
                    :class="{ labelselected: index == labelSelected}"
                    @click="changeLabel(index)">
                    {{ e }}
                </p>
            </div>
        </div>
        <div>
            <p class="title">免责声明</p>
            <p class="mzsm">
                一刻时光是本人独自开发的，为便于与用户交流的留言平台。请不要利用此平台服务制作、上传、下载、复制、发布、传播或者转载如下内容：<br/>
                1、反对宪法所确定的基本原则的；<br/>
                2、危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家 统一的；<br/>
                3、损害国家荣誉和利益的；<br/>
                4、煽动民族仇恨、民族歧视，破坏民族团结的；<br/>
                5、破坏国家宗教政策，宣扬邪教和封建迷信的；<br/>
                6、散布谣言，扰乱社会秩序，破坏社会稳定的；<br/>
                7、散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；<br/>
                8、侮辱或者诽谤他人，侵害他人合法权益的；<br/>
                9、含有法律、行政法规禁止的其他内容的信息。<br/>
            </p>
        </div>
        <div class="foot-bottom">
            <yk-button size="max" nom="secondary" @click="closeModel">丢弃</yk-button>
            <yk-button class="submit" size="max" @click="submit()">确定</yk-button>
        </div>
    </div>
</template>

<script>
    import { cardColor,color} from '@/utils/data.js'
    //
    import YkButton from './YkButton.vue'
    //
    import { getObjectURL } from '@/utils/time.js' 
    //
    import { insterWallApi, profileApi } from '@/api/index.js'
    export default {
        data() {
            return {
                cardColor,
                color,
                selected: 0,    //当前选择颜色
                labelSelected: 0,    //当前选择标签
                message: '',     // 留言信息
                name: '',          // 签名
                user: this.$store.state.user,
                url: '',
            }
        },
        props: {
            labels: {
                default: [],
            },
            //
            id: {
                default: 0
            }
        },
        methods: {
            // 切换颜色
            changeColor(index) {
                this.selected = index;
            },
            // 切换标签
            changeLabel(index) {
                this.labelSelected = index;
            },
            // 关闭弹窗
            closeModel() {
                this.$emit('close');
            },
            //显示图片
            showPhoto() {
                let src = getObjectURL(document.getElementById('file').files[0]);
                this.url = src
            },
            // 图片提交
            photoUpload(data) {
                let file = document.getElementById('file');
                if(file.files.length > 0) {
                    let formData = new FormData();
                    formData.append('file',file.files[0]);

                    profileApi(formData).then((res) => {
                        // console.log(res);
                        
                        data.src = res.src;
                        // console.log(data.src);
                        
                        // 数据写入数据库
                        insterWallApi(data).then((result) => {
                            let cardD = {
                                type: this.id,
                                message: this.message,
                                name: data.name,
                                userId: 32,
                                moment: new Date(),
                                label: this.labelSelected + 1,
                                color: 5,
                                src: res,
                                id: result.message.insertId,
                                isLike: [{count: 0}],
                                like: [{count: 0}],
                                comcount: [{count: 0}],
                                report: [{count: 0}],
                                revoke: [{count: 0}]
                            }
                            // this.$emit('clickbt',cardD)
                            this.message = ''
                            this.$message({type: 'success' , message: '感谢你的记录'})
                            console.log(cardD);
                            
                        })
                    })
                }
            },
            // 提交
            submit() {
                let name = '匿名'
                if(this.name) {
                    name = this.name;
                }                
                let data = {
                    type: this.id,
                    message: this.message,
                    name: name,
                    userId: this.user.id,
                    moment: new Date(),
                    label: this.labelSelected + 1,
                    color: 5,
                    src: ''
                }
                // console.log(data);
                if(this.message && this.id == 0) {
                    insterWallApi(data).then((res) => {
                        let cardD = {
                            type: this.id,
                            message: this.message,
                            name: name,
                            userId: this.user.id,
                            moment: new Date(),
                            label: this.labelSelected + 1,
                            color: 5,
                            src: '',
                            id: res.message.insertId,
                            isLike: [{count: 0}],
                            like: [{count: 0}],
                            comcount: [{count: 0}],
                            report: [{count: 0}],
                            revoke: [{count: 0}]
                        }
                        data.color = this.selected,
                        this.message = '';
                        this.$emit('clickbt',cardD);
                        this.$message({type: 'success',message: '感谢你的记录'})
                    })
                }
                else if(this.id == 1 && this.src !='') {
                    this.photoUpload(data);
                }
            }
        },
        computed: {
            // 去除labels的第一个元素
            filteredLabels() {
                return this.labels.slice(1);
            }
        },
        components: {
            YkButton,
        },
    }
</script>

<style lang="less" scoped>
    @font-face {
        font-family: 'YK';
        src: url('@/assets/font/font/975MaruSC-Medium.ttf');
    }

    .new-card-colors {
        width: 100%;
        height: 25px;
        display: flex;
        align-items: center;
    }

    .colors {
        width: 24px;
        height: 24px;
        cursor: pointer;
        user-select: none;
    }

    .colors:nth-child(n+1) {
        margin: 0 8px 0 0;
    }
    
    .colorSelect {
        border: 1px solid rgba( 59, 115, 240, 1);
    }

    .new-card-content {
        width: 100%;
        height: 240px;
        margin: 12px 0 0 0;
        padding: 12px;
        box-sizing: border-box;
    }

    #message {
        width: 100%;
        height: 172px;
        background-color: transparent;
        border: none;
        resize: none;
        padding: 8px;
        box-sizing: border-box;
        font-family: 'YK';
    }

    #name {
        width: 100%;
        height: 36px;
        padding: 8px;
        box-sizing: border-box;
        border: 1.5px solid rgba( 255, 255, 255, .8);
        background-color: transparent;
        border-radius: 5px;
        font-family: 'YK';
    }

    .title {
        color: @gray-0;
        font-weight: 600;
        margin: 30px 0 0 0;
    }

    .label {
        display: flex;
        flex-wrap: wrap;
    }

    .label-li {
        width: auto;
        height: 24px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: @font-size-14;
        cursor: pointer;
        user-select: none;
        color: @gray-1;
        padding: 0 8px;
    }

    .label-li:hover {
        background-color: #EDEDEDED;
    }

    .label-li:nth-child(n+1) {
        margin: 20px 13px 0 0;
    }

    .labelselected {
        background-color: #EDEDEDED;
        font-weight: 600;
        color: @gray-0;
    }

    .mzsm {
        font-size: @font-size-12;
        color: @gray-1;
        margin: 12px 0 80px 0;
    }

    .foot-bottom {
        display: flex;
        align-items: center;
        padding: 20px;
        position: fixed;
        right: 0;
        bottom: 45px;
        background-color: #fff;
    }

    .submit {
        width: 200px;
        margin: 0 0 0 20px;
    }

    .add-photo {
        margin: 0 0 20px 0;
        position: relative;
    }

    #file {
        position: absolute;
        z-index: 10;
        top: -10px;
        width: 64px;
        height: 74px;
        opacity: 0;
        cursor: pointer;
    }

    .add-bt {
        width: 64px;
        height: 64px;
        border: 1px solid @gray-2;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .icon-tianjia {
        font-size: 24px;
        color: @gray-2;
    }

    .photo-div {
        width: 100%;
        max-height: 200px;
        overflow: hidden;
        display: flex;
        align-items: center;
        background-color: #f0f0f0;
    }

    img {
        width: 100%;
    }

    .change-bt {
        position: absolute;
        top: 12px;
        left: 12px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, .3);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .icon-xiugai {
        color: #fff;
    }


</style>